<template>
  <div class="app-container">
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #form>
        <el-form @submit.native.prevent :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-row>
            <el-form-item prop="distrName">
              <el-input :placeholder="$t('租户名称')" v-model="queryParams.distrName" clearable />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions>
        <el-button
          type="primary"
          @click="handleRemit"
          plain
          size="mini"
          v-if="
            hasPermission(['distribution:billDistributorWithdraw:remit', 'distribution:billDistributorWithdraw:list'])
          "
        >
          {{ $t('给供应商汇款') }}
        </el-button>
      </template>
    </PageSearch>
    <el-table :height="calTableHeight()" v-loading="loading" ref="TableRef" :data="tableData" row-key="menuId">
      <!-- 租户名称 金额 操作 -->
      <el-table-column align="center" show-overflow-tooltip prop="distrName" :label="$t('租户名称')" />

      <el-table-column align="center" show-overflow-tooltip prop="balance" :label="$t('金额')">
        <template slot-scope="{ row }">
          <div>{{ row.balance | thousand }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" show-overflow-tooltip prop="" :label="$t('操作')" width="200">
        <template slot-scope="{ row }">
          <el-dropdown @command="(command) => handleCommand(command, row)">
            <span class="el-dropdown-link">
              {{ $t('更多') }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="detail" v-hasPermi="['distribution:billDistributor:list']">
                {{ $t('查询业务详情') }}
              </el-dropdown-item>
              <el-dropdown-item command="withdrawalRecord" v-hasPermi="['distribution:billDistributorWithdraw:query']">
                {{ $t('提现记录查询') }}
              </el-dropdown-item>
              <el-dropdown-item command="recharge" v-hasPermi="['distribution:fundsDistributor:addBalance']">
                {{ $t('供应商充值') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <Details
      :type="detail.type"
      @getList="getList"
      :show.sync="detail.show"
      :title="detail.title"
      :formData="detail.formData"
    />
    <Recharge @getList="getList" :show.sync="recharge.show" :formData="recharge.formData" />
    <WithdrawalRecord @getList="getList" :show.sync="withdrawalRecord.show" :formData="withdrawalRecord.formData" />
    <Remit @getList="getList" :show.sync="remit.show" :formData="remit.formData" />
  </div>
</template>

<script>
import { list } from '@/api/bill/platDistributerBalance'
import { useDict } from '@/utils/useDict'
import Details from './components/details.vue'
import Recharge from './components/recharge.vue'
import WithdrawalRecord from './components/withdrawalRecord.vue'
import Remit from './components/remit.vue'
import { checkPermi } from '@/utils/permission'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'Platform',
  components: {
    Details,
    Recharge,
    WithdrawalRecord,
    Remit,
  },
  data() {
    return {
      showSearch: false,
      /**导出 */
      exportInfo: {},

      /**提现记录*/
      withdrawalRecord: {
        /**显示详情 */
        show: false,
        formData: {},
      },
      /**汇款*/
      remit: {
        /**显示详情 */
        show: false,
        formData: {},
      },
      /**充值 */
      recharge: {
        /**显示详情 */
        show: false,
        formData: {},
      },
      /**详情信息 */
      detail: {
        /**显示详情 */
        show: false,
        type: '',
        title: '',
        formData: {},
      },

      /**
       * 账单类型
       */
      bill_type_distributor_list: [],
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        time: [],
        pageNum: 1,
        pageSize: 20,
        type: '',
      },
    }
  },
  created() {
    this.getList()
    useDict('bill_type_distributor').then(({ bill_type_distributor }) => {
      this.bill_type_distributor_list = bill_type_distributor
    })
  },
  methods: {
    hasPermission(permissions) {
      let flag = true
      permissions.map((permission) => {
        if (!checkPermi([permission])) {
          flag = false
        }
      })
      return flag
    },
    /**给供应商汇款 */
    handleRemit() {
      this.remit.show = true
    },
    handleCommand(command, row) {
      console.log(`command ==>`, command)
      switch (command) {
        case 'detail':
          this.detail.formData = row
          this.detail.title = this.$t('详情')
          this.detail.show = true
          break
        case 'withdrawalRecord':
          this.withdrawalRecord.formData = row
          this.withdrawalRecord.show = true
          break
        case 'recharge':
          this.recharge.formData = row
          this.recharge.show = true
          break

        default:
          break
      }
    },

    handleExport() {
      if (this.queryParams.time.length == 0) {
        return this.$message({ type: 'error', message: this.$t('请选择时间范围') })
      }
      const data = {
        startTime: this.queryParams.time[0],
        endTime: this.queryParams.time[1],
      }
      this.download(
        'distribution/billPlatform/export',
        {
          ...this.queryParams,
          ...data,
        },
        `platformBalance_${new Date().getTime()}.xlsx`,
      )
    },
    handleType(type) {
      const index = this.bill_type_distributor_list.findIndex((i) => i.dictValue == type)
      return this.bill_type_distributor_list[index]?.dictLabel
    },

    /** 查询菜单列表 */
    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        startTime,
        endTime,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      this.loading = true
      list(data).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 20
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = ''))
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 20
      this.getList()
    },
  },
}
</script>
<style lang="scss"></style>
